<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		  <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            margin: 200px auto;
        }
        ul {
            width: 392px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }
        li:hover {
            background-color: red;
        }
        input {
            width: 400px;
        }
        button {
            width: 70px;
        }
    </style>
	</head>
	<body>
		 <div class="box">
        <input type="text"/>
        <button>搜索</button>
        <!--<ul>-->
            <!--<li>aaaa</li>-->
            <!--<li>bbb</li>-->
            <!--<li>ccc</li>-->
        <!--</ul>-->
    </div>
		
		
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script>
		//需求:输入内容，模拟服务器获取内容，创建ul，并在其中显示
		//输入事件，键盘弹起事件
			var arr = ["a","ab","abc","abcd","aa","aaa"];
			var box = document.getElementsByTagName("div")[0]
			var input = document.getElementsByTagName("input")[0]
			
			
			input.onkeyup = fn;
			
			
			function fn(){
				var newStrArr=[]//每次清空
				
				var boolUL = document.querySelector("ul")
				console.log(boolUL);
				if(boolUL){
						box.removeChild(boolUL);
					
				}
//				console.log(this.value)
				for(var i=0;i<arr.length;i++){
					var val = input.value;
					if(arr[i].indexOf(val)===0){
						newStrArr.push("<li>"+arr[i]+"</li>")
					}
				}
				
//				
				if(newStrArr.length>0){
					//创建ul
				var ul = document.createElement("ul")
				var newStr = newStrArr.join("")
				
				ul.innerHTML = newStr;
				box.appendChild(ul)
				}
				
				$("ul").children("li").click(function(){
					input.value=this.innerText;
					fn();
//					console.log(this.innerText);
					
				})
			}
			
		</script>
		
	</body>
</html>